<template>
    <div class="app-container">
        <el-divider content-position="left">邮件服务器配置</el-divider>
        <el-form ref="form" :model="form" :rules="formRules" label-width="150px" style="width: 800px;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="SMTP服务器" prop="host">
                        <el-input v-model="form.host"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="端口" prop="port">
                        <!-- <el-input type="number" v-model.number="form.port"></el-input> -->
                        <el-input-number v-model.number="form.port" controls-position="right" :min="1" :max="65535" class="textLeft"  />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户名" prop="user">
                        <el-input v-model="form.user"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" type="password"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-alert title="通知模板支持html" type="info" :closable="false">
            </el-alert><br>
            <el-form-item label="模板" prop="template">
                <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" placeholder="" v-model="form.template">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit()">保存</el-button>
            </el-form-item>
            <el-divider content-position="left">邮件服务器配置</el-divider>
            <el-row>
                <el-button type="primary" @click="createUser" style="margin-left: 8px;"><i class="el-icon-plus"></i>
                    新增用户</el-button>
            </el-row>
            <div class="custom_tag">
                <div class="custom_tag_group" v-for="item in receivers">
                    <el-tooltip class="item" effect="dark" :content="item.username + '-' + item.email"
                        placement="top-start">
                        <el-tag :key="item.email">
                            {{ item.username }} - {{ item.email }}
                        </el-tag>
                    </el-tooltip>
                    <i class="el-icon-close" @click="deleteUser(item)"></i>
                </div>
            </div>


        </el-form>
        <el-dialog title="" :visible.sync="dialogVisible" width="30%">
            <el-form :model="userForm" :rules="userRules" ref="userForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model.trim="userForm.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱地址" prop="email">
                    <el-input type="email" v-model.trim="userForm.email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveUser">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script>
import * as notificationService from "@/api/system/notice";
export default {
    components: {},
    props: [],
    data() {
        return {
            form: {
                host: '',
                port: 465,
                user: '',
                password: '',
                template: ''
            },
            userForm:{
                username:'',
                email:'',
            },
            formRules: {
                host: [
                    { required: true, message: '请输入邮件服务器地址', trigger: 'blur' }
                ],
                port: [
                    { type: 'number', required: true, message: '请输入有效的端口', trigger: 'blur', 'min': 0, 'max': 65535 }
                ],
                user: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                template: [
                    { required: true, message: '请输入通知模板内容', trigger: 'blur' }
                ]
            },
            userRules: {
                email: [
                    { type: 'email', required: true, message: '请输入有效的邮箱', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
            },
            receivers: [],
            dialogVisible: false
        }
    },
    created() {
        this.init()
    },
    methods: {
        createUser() {
            this.resetForm("userForm");
            this.dialogVisible = true
        },
        saveUser() {
            this.$refs['userForm'].validate((valid) => {
                if (!valid) {
                    return false
                }
                console.log(valid)
                notificationService.createMailUser(this.userForm).then(res => {
                    this.dialogVisible = false
                    this.init()
                })
            })

        },
        deleteUser(item) {
            notificationService.removeMailUser(item.id).then(res => {
                this.init()
            })
        },
        submit() {
            this.$refs['form'].validate((valid) => {
                if (!valid) {
                    return false
                }
                notificationService.updateMail(this.form).then((res) => {
                    this.$message.success('更新成功')
                })
            })
        },
        init() {
            this.username = ''
            this.email = ''
            notificationService.mail().then(res => {
                console.log(res);
                this.form.host = res.data.host
                if (res.data.port) {
                    this.form.port = res.data.port
                }
                this.form.user = res.data.user
                this.form.password = res.data.password
                this.form.template = res.data.template
                this.receivers = res.data.mail_users
            })
        }
    }
}
</script>
  
<style lang="scss" scoped>
.custom_tag {
    display: flex;
    flex-wrap: wrap;

    .custom_tag_group {
        position: relative;
        width: 200px;

        /* margin: 8px; */
        .el-icon-close {
            /* line-height: 32px; */
            /* padding-top: 16px; */
            position: absolute;
            top: 16px
        }
    }

}

.el-tag {
    width: 170px;
    /* 设置最大宽度，根据需要调整 */
    margin-top: 10px;
    margin-right: 4px;
    /* display: flex; */
    /* flex-wrap: wrap; */
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
</style>
